<!--
 * @Author: xuna
 * @Descripttion: 贺卡祝福模板
-->
<template>
  <div v-if="isCare == 1" class="greet-container">
    <div class="greet-set">
      <img :src="previewImg" alt="" />
      <div class="greet-info">
        <p class="title">年节贺卡祝福</p>
        <span>
          • 日历提醒日程中，可选择贺卡模板进行发送，每个员工都会在指定时间收到来自企业的定制祝福。
        </span>
        <span>• 发送时间：</span>
        <p>管理角色设置的时间点。</p>
        <span>• 主题：</span>
        <p>重要节日或节气，本人登录即可查看。</p>
        <span>• 贺卡样式：</span>
        <p>如左侧示意图</p>
        <el-button class="settbtn reset-btn" @click="jumpFestival">去设置</el-button>
      </div>
    </div>
    <div class="greet-moduels">
      <el-tabs v-model="activeName" class="tab-panel" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in moduleList"
          :key="item.title"
          :label="item.title"
          :name="item.title"
        ></el-tab-pane>
      </el-tabs>
      <div
        v-for="(item, index) in moduleList"
        v-show="index == currentTab"
        :key="item.title"
        class="modules-panel"
      >
        <img
          v-for="(tab, tabIndex) in item.list"
          :key="tabIndex"
          :src="tab"
          alt=""
          @click="previewShow(tab)"
        />
      </div>
    </div>
  </div>
</template>

<script>
  const guoqing1 = require('@/assets/img/greetCard/guoqing-1.png');
  const guoqing2 = require('@/assets/img/greetCard/guoqing-2.png');
  const guoqing3 = require('@/assets/img/greetCard/guoqing-3.png');
  const zhongqiu1 = require('@/assets/img/greetCard/zhongqiu-1.png');
  const zhongqiu2 = require('@/assets/img/greetCard/zhongqiu-2.png');
  const zhongqiu3 = require('@/assets/img/greetCard/zhongqiu-3.png');
  const shengdan1 = require('@/assets/img/greetCard/shengdan-1.png');
  const shengdan2 = require('@/assets/img/greetCard/shengdan-2.png');
  const shengdan3 = require('@/assets/img/greetCard/shengdan-3.png');

  export default {
    props: {
      isCare: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        activeName: '中秋节',
        currentTab: 0,
        moduleList: [
          { title: '中秋节', list: [zhongqiu1, zhongqiu2, zhongqiu3] },
          { title: '国庆节', list: [guoqing1, guoqing2, guoqing3] },
          { title: '圣诞节', list: [shengdan1, shengdan2, shengdan3] },
        ],
        previewImg: '',
      };
    },
    watch: {},
    created() {},
    activated() {
      this.previewImg = this.moduleList[this.currentTab].list[this.currentTab];
    },
    methods: {
      handleClick(tab) {
        console.log(tab.index);
        this.currentTab = tab.index;
      },
      beforeClose() {
        this.$emit('closeDrawer', false);
      },
      previewShow(img) {
        this.previewImg = img;
      },
      jumpFestival() {
        this.$router.push({ path: '/festivalCalendar' });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .greet-container {
    width: 100%;
    .greet-set {
      display: flex;
      padding: 14px 16px 16px;
      box-sizing: border-box;
      border-radius: 7px;
      background-color: #fff;
      font-weight: 400;
      > img {
        width: 194px;
        height: 410px;
        margin-right: 42px;
      }
      .greet-info {
        font-size: 13px;
        p {
          color: #353739;

          &.title {
            font-size: 14px;
            color: #34363b;
            font-weight: 800;
          }
        }
        span {
          color: #7f848b;
          line-height: 28px;
          display: block;
        }
        .settbtn {
          display: block;
          width: 94px;
          height: 36px;
          background: rgba(255, 254, 255, 1);
          border-radius: 7px;
          border: 1px solid rgba(232, 228, 232, 1);
          &.preview-btn {
            background-color: #3771e9;
            margin: 19px 0 0 !important;
          }
          &.reset-btn {
            margin-top: 57px;
            color: #353739;
          }
        }
      }
    }
    .greet-moduels {
      margin-top: 15px;
      background-color: #fff;
      .tab-panel {
        padding: 0 16px 0 !important;
        box-sizing: border-box;
      }
      .tab-panel,
      /deep/.el-tabs__header,
      /deep/.el-tabs__nav-wrap,
      /deep/.el-tabs__nav-scroll,
      /deep/.el-tabs__nav {
        font-weight: 500;
        width: 100%;
        height: 46px;
        font-size: 14px;
        color: #353739;
        border-radius: 8px;
      }
      .modules-panel {
        width: 100%;
        height: 438px;
        padding: 15px 17px 13px;
        box-sizing: border-box;
        > img {
          width: 194px;
          height: 410px;
          margin-right: 17px;
        }
      }
    }
  }
</style>
